<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
</head>
<body>
<div id="app">
  <!--表单-->
  <el-form :inline="true" :model="brand" class="demo-form-inline">
    <el-form-item label="当前状态">
      <el-select v-model="brand.status" placeholder="当前状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="企业名称">
      <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
    </el-form-item>
    <el-form-item label="品牌名称">
      <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <!--批量删除按钮和新增按钮-->
  <el-row>
    <el-button type="danger" plain>批量删除</el-button>
    <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
  </el-row>

  <!--添加数据的对话框-->
  <el-dialog
      title="编辑品牌"
      :visible.sync="dialogVisible"
      width="30%">

    <!--对话框弹出的表单-->
    <el-form :model="brand" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="品牌名称" prop="name" required>
        <el-input v-model="brand.brandName"></el-input>
      </el-form-item>

      <el-form-item label="企业名称" prop="region" required>
        <el-input v-model="brand.companyName"></el-input>
      </el-form-item>

      <el-form-item label="排序" prop="name">
        <el-input v-model="brand.ordered"></el-input>
      </el-form-item>

      <el-form-item label="备注" prop="name">
        <el-input v-model="brand.description"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="delivery">
        <el-switch v-model="brand.status"
                   active-value="1"
                   inactive-value="0"
        ></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addBrand">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!--表格-->
  <template>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          prop="brandName"
          label="品牌名称"
          align="center">
      </el-table-column>
      <el-table-column
          prop="companyName"
          label="企业名称"
          align="center">
      </el-table-column>
      <el-table-column
          prop="ordered"
          label="排序"
          align="center">
      </el-table-column>
      <el-table-column
          prop="status"
          align="center"
          label="当前状态">
      </el-table-column>
      <el-table-column
          align="center"
          label="操作">
        <el-row>
          <el-button type="warning">修改</el-button>
          <el-button type="danger">删除</el-button>
        </el-row>
      </el-table-column>
    </el-table>
  </template>

  <!--分页工具条-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
  </el-pagination>

</div>


<!--引入资源文件-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<!--创建Vue的核心对象-->
<script>
  new Vue({
    el: "#app",
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

      //复选框选中后的方法
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },

      //提交表单的方法
      onSubmit() {
        console.log(this.brand);
      },
      //添加数据方法
      addBrand() {
        console.log(this.brand);
      },

      //分页工具条方法
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        //当前页码
        currentPage: 1,

        //添加数据对话框是否展示的数据
        dialogVisible: false,

        //品牌模型数据
        brand: {
          status: '',
          brandName: '',
          companyName: '',
          id: "",
          ordered: "",
          description: ""
        },

        //表格的数据
        tableData: [{
          brandName: '华为',
          companyName: '华为科技有限公司',
          ordered: '20',
          status: '1',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],

        //复选框选中的集合
        multipleSelection: []
      }
    }
  })
</script>
</body>
</html>